<template>
  <div class="home">
    <!-- 轮播横幅 -->
    <section class="hero">
      <div class="hero-background">
        <div class="hero-overlay"></div>
      </div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-text">
            <h1 class="hero-title">
              <span class="title-line">发现精彩演出</span>
              <span class="title-line">享受文化盛宴</span>
            </h1>
            <p class="hero-subtitle">
              汇聚全球优质演出资源，为您提供一站式票务服务
            </p>
            <div class="hero-stats">
              <div class="stat-item">
                <span class="stat-number">1000+</span>
                <span class="stat-label">精彩演出</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">50万+</span>
                <span class="stat-label">用户选择</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">100+</span>
                <span class="stat-label">合作场馆</span>
              </div>
            </div>
            <div class="hero-actions">
              <RouterLink to="/events" class="btn btn-primary btn-large">
                <span>🎭</span>
                立即探索
              </RouterLink>
              <RouterLink to="/events?category=演唱会" class="btn btn-secondary btn-large">
                <span>🎤</span>
                热门演唱会
              </RouterLink>
            </div>
          </div>
          <div class="hero-visual">
            <div class="floating-cards">
              <div class="floating-card card-1">
                <div class="card-icon">🎭</div>
                <div class="card-text">音乐剧</div>
              </div>
              <div class="floating-card card-2">
                <div class="card-icon">🎤</div>
                <div class="card-text">演唱会</div>
              </div>
              <div class="floating-card card-3">
                <div class="card-icon">🎪</div>
                <div class="card-text">话剧</div>
              </div>
              <div class="floating-card card-4">
                <div class="card-icon">💃</div>
                <div class="card-text">舞蹈</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门推荐 -->
    <section class="hot-recommendations">
      <div class="container">
        <div class="section-header">
          <h2>🔥 热门推荐</h2>
          <p>基于销量和用户喜爱度推荐</p>
        </div>
        
        <!-- 热门演出轮播 -->
        <div class="hot-carousel">
          <div class="hot-main-event" v-if="hotEvents.length > 0">
            <div class="hot-event-image">
              <img v-lazy="{ src: hotEvents[0].image, fallback: `${BASE_URL}/images/phantom-opera.svg` }" :alt="hotEvents[0].title" />
              <div class="hot-badge">🔥 最热门</div>
            </div>
            <div class="hot-event-info">
              <div class="hot-category">{{ hotEvents[0].category }}</div>
              <h3>{{ hotEvents[0].title }}</h3>
              <p class="hot-venue">📍 {{ hotEvents[0].venue }}</p>
              <p class="hot-date">📅 {{ formatDate(hotEvents[0].date) }}</p>
              <div class="hot-price">
                <span class="price">¥{{ hotEvents[0].price }}</span>
                <span>起</span>
              </div>
              <button class="btn btn-primary" @click="goToEvent(hotEvents[0].id)">
                立即购买
              </button>
            </div>
          </div>
        </div>

        <!-- 热门演出网格 -->
        <div class="hot-grid">
          <div 
            v-for="(event, index) in hotEvents.slice(1, 7)" 
            :key="event.id"
            class="hot-card"
            @click="goToEvent(event.id)"
          >
            <div class="hot-rank">{{ index + 2 }}</div>
            <div class="hot-card-image">
              <img v-lazy="{ src: event.image, fallback: `${BASE_URL}/images/phantom-opera.svg` }" :alt="event.title" />
            </div>
            <div class="hot-card-content">
              <div class="hot-card-category">{{ event.category }}</div>
              <h4>{{ event.title }}</h4>
              <p>{{ event.venue }}</p>
              <div class="hot-card-price">
                <span class="price">¥{{ event.price }}</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center">
          <RouterLink to="/events?sortBy=popularity&order=desc" class="btn btn-secondary">
            查看更多热门演出
          </RouterLink>
        </div>
      </div>
    </section>

    <!-- 分类推荐 -->
    <section class="category-recommendations">
      <div class="container">
        <div class="section-header">
          <h2>🎭 分类推荐</h2>
          <p>按类型发现你喜欢的演出</p>
        </div>
        
        <div class="category-tabs">
          <button 
            v-for="category in categoryTabs" 
            :key="category.value"
            :class="['category-tab', { active: selectedCategoryTab === category.value }]"
            @click="selectCategoryTab(category.value)"
          >
            <span class="tab-icon">{{ category.icon }}</span>
            <span class="tab-name">{{ category.name }}</span>
          </button>
        </div>
        
        <div class="category-events">
          <div class="category-events-grid">
            <div 
              v-for="event in categoryEvents.slice(0, 8)" 
              :key="event.id"
              class="category-event-card"
              @click="goToEvent(event.id)"
            >
              <div class="category-event-image">
                <img v-lazy="{ src: event.image, fallback: `${BASE_URL}/images/phantom-opera.svg` }" :alt="event.title" />
                <div class="category-badge">{{ event.category }}</div>
              </div>
              <div class="category-event-content">
                <h4>{{ event.title }}</h4>
                <p class="venue">📍 {{ event.venue }}</p>
                <p class="date">📅 {{ formatDate(event.date) }}</p>
                <div class="category-event-price">
                  <span class="price">¥{{ event.price }}</span>
                  <span class="label">起</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="category-more">
            <button class="btn btn-secondary" @click="goToCategoryPage(selectedCategoryTab)">
              查看更多{{ getCategoryName(selectedCategoryTab) }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 即将开始 -->
    <section class="upcoming">
      <div class="container">
        <div class="section-header">
          <h2>⏰ 即将开始</h2>
          <p>不要错过这些精彩演出</p>
        </div>
        <div class="upcoming-grid">
          <div 
            v-for="event in upcomingEvents" 
            :key="event.id"
            class="upcoming-card"
            @click="goToEvent(event.id)"
          >
            <div class="upcoming-image">
              <img v-lazy="{ src: event.image, fallback: `${BASE_URL}/images/phantom-opera.svg` }" :alt="event.title" />
              <div class="upcoming-countdown">
                <span>{{ getCountdown(event.date) }}</span>
              </div>
            </div>
            <div class="upcoming-content">
              <div class="upcoming-category">{{ event.category }}</div>
              <h3>{{ event.title }}</h3>
              <p>{{ event.venue }}</p>
              <p>{{ formatDate(event.date) }}</p>
              <div class="upcoming-price">
                <span class="price">¥{{ event.price }}</span>
                <span>起</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { apiClient, BASE_URL } from '@/api/client'

const router = useRouter()

// 热门演出数据
const hotEvents = ref([])
// 即将开始演出数据
const upcomingEvents = ref([])
// 分类演出数据
const categoryEvents = ref([])
// 选中的分类标签页
const selectedCategoryTab = ref('演唱会')

// 分类标签页
const categoryTabs = ref([
  { value: '演唱会', name: '演唱会', icon: '🎤' },
  { value: '音乐剧', name: '音乐剧', icon: '🎭' },
  { value: '话剧', name: '话剧', icon: '🎪' },
  { value: '舞蹈', name: '舞蹈', icon: '💃' },
  { value: '相声', name: '相声', icon: '😄' },
  { value: '儿童剧', name: '儿童剧', icon: '🧸' }
])

onMounted(async () => {
  await Promise.all([
    loadHotEvents(),
    loadUpcomingEvents(),
    loadCategoryEvents(selectedCategoryTab.value)
  ])
})

// 加载热门演出（按热度排序）
const loadHotEvents = async () => {
  try {
    const response = await apiClient.get('/api/events?page=0&size=8&sortBy=popularity&order=desc')
    const content = response?.data?.content || []
    hotEvents.value = content.map(e => ({
      id: e.id,
      title: e.title,
      venue: e.venue,
      date: e.startTime,
      price: e.lowestPrice ?? 0,
      category: e.category,
      image: e.posterUrl ? `${BASE_URL}${e.posterUrl}` : `${BASE_URL}/images/phantom-opera.svg`
    }))
  } catch (err) {
    console.error('加载热门演出失败', err)
    // 如果热度排序失败，回退到时间排序
    try {
      const fallbackResponse = await apiClient.get('/api/events?page=0&size=8&sortBy=startTime&order=ASC')
      const content = fallbackResponse?.data?.content || []
      hotEvents.value = content.map(e => ({
        id: e.id,
        title: e.title,
        venue: e.venue,
        date: e.startTime,
        price: e.lowestPrice ?? 0,
        category: e.category,
        image: e.posterUrl ? `${BASE_URL}${e.posterUrl}` : `${BASE_URL}/images/phantom-opera.svg`
      }))
    } catch (fallbackErr) {
      console.error('加载演出数据失败', fallbackErr)
    }
  }
}

// 加载即将开始的演出
const loadUpcomingEvents = async () => {
  try {
    const response = await apiClient.get('/api/events?page=0&size=6&sortBy=startTime&order=ASC')
    const content = response?.data?.content || []
    const now = new Date()
    upcomingEvents.value = content
      .filter(e => new Date(e.startTime) > now)
      .map(e => ({
        id: e.id,
        title: e.title,
        venue: e.venue,
        date: e.startTime,
        price: e.lowestPrice ?? 0,
        category: e.category,
        image: e.posterUrl ? `${BASE_URL}${e.posterUrl}` : `${BASE_URL}/images/phantom-opera.svg`
      }))
  } catch (err) {
    console.error('加载即将开始演出失败', err)
  }
}

// 加载分类演出
const loadCategoryEvents = async (category) => {
  try {
    const response = await apiClient.get(`/api/events?page=0&size=8&category=${encodeURIComponent(category)}&sortBy=startTime&order=ASC`)
    const content = response?.data?.content || []
    categoryEvents.value = content.map(e => ({
      id: e.id,
      title: e.title,
      venue: e.venue,
      date: e.startTime,
      price: e.lowestPrice ?? 0,
      category: e.category,
      image: e.posterUrl ? `${BASE_URL}${e.posterUrl}` : `${BASE_URL}/images/phantom-opera.svg`
    }))
  } catch (err) {
    console.error('加载分类演出失败', err)
  }
}

// 选择分类标签页
const selectCategoryTab = (category) => {
  selectedCategoryTab.value = category
  loadCategoryEvents(category)
}

// 获取分类名称
const getCategoryName = (category) => {
  const tab = categoryTabs.value.find(t => t.value === category)
  return tab ? tab.name : category
}

// 分类数据（从categoryTabs计算得出）
const categories = computed(() => {
  return categoryTabs.value.map((tab, index) => ({
    id: index + 1,
    name: tab.name,
    icon: tab.icon,
    count: Math.floor(Math.random() * 30) + 10 // 模拟数量
  }))
})

// 服务特色
const features = ref([
  {
    id: 1,
    icon: '🎫',
    title: '正品保证',
    description: '所有票品均为官方正品，假一赔十'
  },
  {
    id: 2,
    icon: '⚡',
    title: '快速出票',
    description: '支付成功后立即出票，无需等待'
  },
  {
    id: 3,
    icon: '🔒',
    title: '安全支付',
    description: '多种支付方式，资金安全有保障'
  },
  {
    id: 4,
    icon: '📞',
    title: '贴心服务',
    description: '7×24小时客服，随时为您解答疑问'
  }
])

// 格式化日期
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取倒计时
const getCountdown = (dateStr) => {
  const eventDate = new Date(dateStr)
  const now = new Date()
  const diff = eventDate.getTime() - now.getTime()
  
  if (diff <= 0) {
    return '已开始'
  }
  
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
  
  if (days > 0) {
    return `${days}天后`
  } else if (hours > 0) {
    return `${hours}小时后`
  } else {
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    return `${minutes}分钟后`
  }
}

// 跳转到演出详情
const goToEvent = (eventId) => {
  router.push(`/event/${eventId}`)
}

// 跳转到分类页面
const goToCategory = (category) => {
  router.push(`/events?category=${encodeURIComponent(category)}`)
}

// 跳转到分类页面（带分类参数）
const goToCategoryPage = (category) => {
  router.push(`/events?category=${encodeURIComponent(category)}`)
}
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #e91e63 100%);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  color: white;
}

.hero-text {
  text-align: left;
}

.hero-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
}

.title-line {
  display: block;
  background: linear-gradient(45deg, #fff, #f8bbd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 40px;
  opacity: 0.9;
  color: #f0f0f0;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #e0e0e0;
}

.hero-actions {
  display: flex;
  gap: 20px;
}

.btn-large {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-large span {
  font-size: 18px;
}

.hero-visual {
  position: relative;
  height: 500px;
}

.floating-cards {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  color: white;
  animation: float 6s ease-in-out infinite;
}

.floating-card .card-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.floating-card .card-text {
  font-size: 14px;
  font-weight: 500;
}

.card-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.card-2 {
  top: 10%;
  right: 20%;
  animation-delay: 1.5s;
}

.card-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 3s;
}

.card-4 {
  bottom: 20%;
  right: 10%;
  animation-delay: 4.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 通用板块样式 */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #212121;
}

.section-header p {
  color: #757575;
  font-size: 16px;
}

/* 热门推荐板块 */
.hot-recommendations {
  padding: 60px 0;
  background: linear-gradient(135deg, #fff5f5, #fafafa);
}

.hot-carousel {
  margin-bottom: 40px;
}

.hot-main-event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.hot-event-image {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.hot-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.hot-event-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hot-category {
  background-color: #e91e63;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
  margin-bottom: 16px;
}

.hot-event-info h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #212121;
}

.hot-venue, .hot-date {
  color: #757575;
  font-size: 16px;
  margin-bottom: 8px;
}

.hot-price {
  margin: 20px 0;
}

.hot-price .price {
  font-size: 28px;
  font-weight: bold;
  color: #f44336;
}

.hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.hot-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  position: relative;
}

.hot-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.hot-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  z-index: 2;
}

.hot-card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.hot-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hot-card-content {
  padding: 20px;
}

.hot-card-category {
  background-color: #9c27b0;
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  width: fit-content;
  margin-bottom: 12px;
}

.hot-card-content h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #212121;
  line-height: 1.4;
}

.hot-card-content p {
  color: #757575;
  font-size: 14px;
  margin-bottom: 4px;
}

.hot-card-price {
  margin-top: 12px;
}

.hot-card-price .price {
  font-size: 18px;
  font-weight: bold;
  color: #f44336;
}

/* 分类推荐板块 */
.category-recommendations {
  padding: 60px 0;
  background: white;
}

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 0; /* tabs 与下方内容紧贴 */
  flex-wrap: wrap;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid #e0e0e0;
  border-radius: 24px;
  background: white;
  color: #757575;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.category-tab:hover {
  border-color: #e91e63;
  color: #e91e63;
  transform: translateY(-2px);
}

.category-tab.active {
  border-color: #e91e63;
  background: #e91e63;
  color: white;
}

.tab-icon {
  font-size: 18px;
}

.tab-name {
  font-size: 14px;
}

.category-events {
  margin-top: 0; /* 取消额外间距，避免与上方 tabs 留白 */
}

.category-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.category-event-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.category-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.category-event-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.category-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.category-event-content {
  padding: 20px;
}

.category-event-content h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #212121;
  line-height: 1.4;
}

.category-event-content .venue,
.category-event-content .date {
  color: #757575;
  font-size: 14px;
  margin-bottom: 8px;
}

.category-event-price {
  margin-top: 12px;
}

.category-event-price .price {
  font-size: 18px;
  font-weight: bold;
  color: #f44336;
}

.category-event-price .label {
  color: #757575;
  font-size: 14px;
  margin-left: 4px;
}

.category-more {
  text-align: center;
}

/* 即将开始板块 */
.upcoming {
  padding: 60px 0;
  background-color: #fafafa;
}

.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.upcoming-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.upcoming-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.upcoming-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.upcoming-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upcoming-countdown {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: #333;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upcoming-content {
  padding: 20px;
}

.upcoming-category {
  background-color: #4caf50;
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
  margin-bottom: 12px;
}

.upcoming-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #212121;
}

.upcoming-content p {
  color: #757575;
  font-size: 14px;
  margin-bottom: 4px;
}

.upcoming-price {
  margin-top: 16px;
}

.upcoming-price .price {
  font-size: 18px;
  font-weight: bold;
  color: #f44336;
}

/* 通用样式 */
.text-center {
  text-align: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background-color: #e91e63;
  color: white;
}

.btn-primary:hover {
  background-color: #ad1457;
}

.btn-secondary {
  background-color: #9c27b0;
  color: white;
}

.btn-secondary:hover {
  background-color: #7b1fa2;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .hero-title {
    font-size: 40px;
  }
  
  .hero-stats {
    justify-content: center;
    gap: 30px;
  }
  
  .hero-visual {
    height: 300px;
  }
  
  .hot-main-event {
    grid-template-columns: 1fr;
  }
  
  .hot-event-image {
    height: 250px;
  }
  
  .hot-event-info {
    padding: 30px;
  }
  
  .hot-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .upcoming-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 80vh;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .hero-subtitle {
    font-size: 16px;
  }
  
  .hero-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  
  .stat-number {
    font-size: 24px;
    margin-bottom: 0;
  }
  
  .stat-label {
    font-size: 14px;
  }
  
  .hero-actions {
    flex-direction: column;
    gap: 16px;
  }
  
  .btn-large {
    padding: 14px 24px;
    font-size: 14px;
    justify-content: center;
  }
  
  .hero-visual {
    display: none;
  }
  
  .section-header h2 {
    font-size: 24px;
  }
  
  .hot-recommendations,
  .category-recommendations,
  .upcoming {
    padding: 40px 0;
  }
  
  .hot-main-event {
    margin: 0 16px 32px;
  }
  
  .hot-event-info {
    padding: 24px;
  }
  
  .hot-event-info h3 {
    font-size: 20px;
  }
  
  .hot-price .price {
    font-size: 24px;
  }
  
  .hot-grid,
  .category-events-grid,
  .upcoming-grid {
    grid-template-columns: 1fr;
    margin: 0 16px;
  }
  
  .category-tabs {
    gap: 12px;
    margin: 0 16px 32px;
  }
  
  .category-tab {
    padding: 10px 16px;
  }
  
  .tab-icon {
    font-size: 16px;
  }
  
  .tab-name {
    font-size: 13px;
  }
}
</style>